<template>
    <div>
        <div class="tongji">

            <div class="top">

                <!-- <div class="logo">
                    <img src="../assets/img/tongjilogo.png">
                </div> -->
                <div class="title">
                    <span>大数据分析后台管理</span>
                </div>

            </div>
            
            <div class="bottom">

               

                <div class="middle">
                    <div class="content">

                        <div class="top-details">
                            <div class="tab">
                                <span class="title">已立案</span>
                                <div class="quanbu">
                                    <span class="num">
                                        <span>{{zongshu.yearnewPutonrecord}}</span>
                                        <span>年度新增</span>
                                    </span>
                                    <span class="num">
                                        <span>{{zongshu.putonRecord}}</span>
                                        <span>全部累计</span>
                                    </span>
                                </div>
                            </div>
                            <div class="tab">
                                <span class="title">已结案</span>
                                 <div class="quanbu">
                                    <span class="num">
                                        <span>{{zongshu.yearnewClosecase}}</span>
                                        <span>年度新增</span>
                                    </span>
                                    <span class="num">
                                        <span>{{zongshu.closeCase}}</span>
                                        <span>全部累计</span>
                                    </span>
                                </div>
                            </div>
                            
                            
                        </div>
                        
                        
                        <div class="biaoti">业务类型1（数量）</div>

                        <div class="top-details">
                            <div class="tabs">
                                <span class="title">刑事案件</span>
                                <span class="num">{{yewuleixin[0].value}}</span>
                            </div>
                            <div class="tabs">
                                <span class="title">专项案件</span>
                                <span class="num">{{yewuleixin[1].value}}</span>
                            </div>
                            <div class="tabs">
                                <span class="title">民事案件</span>
                                <span class="num">{{yewuleixin[2].value}}</span>
                                
                            </div>
                            <div class="tabs">
                                <span class="title">仲裁案件</span>
                                <span class="num">{{yewuleixin[3].value}}</span>
                            </div>
                            <div class="tabs">
                                <span class="title">顾问案件</span>
                                <span class="num">{{yewuleixin[4].value}}</span>
                            </div>
                            <div class="tabs">
                                <span class="title">行政案件</span>
                                <span class="num">{{yewuleixin[5].value}}</span>
                            </div>
                        </div>

                        <div class="newbottom">
                                    <div class="list">
                                    <div class="biaoti">涉外案件</div>

                                    <div class="top-details2">
                                        <div class="tabs">
                                            <span class="title">年度新增</span>
                                            <span class="num">{{anjian[1]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">全部累计</span>
                                            <span class="num">{{anjian[0]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">重大案件</span>
                                            <span class="num">{{anjian[2]}}</span>
                                            
                                        </div>
                                        
                                    </div>
                                    </div>

                                    <div class="list">
                                    <div class="biaoti">知识产权案件</div>

                                    <div class="top-details2">
                                        <div class="tabs">
                                            <span class="title">年度新增</span>
                                            <span class="num">{{anjian[7]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">全部累计</span>
                                            <span class="num">{{anjian[8]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">重大案件</span>
                                            <span class="num">{{anjian[9]}}</span>
                                            
                                        </div>
                                        
                                    </div>
                                    </div>

                                    <div class="list">
                                    <div class="biaoti">并购类项目</div>

                                    <div class="top-details2">
                                        <div class="tabs">
                                            <span class="title">年度新增</span>
                                            <span class="num">{{anjian[13]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">全部累计</span>
                                            <span class="num">{{anjian[14]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">重大案件</span>
                                            <span class="num">{{anjian[15]}}</span>
                                            
                                        </div>
                                        
                                    </div>
                                    </div>

                                    <div class="list">
                                    <div class="biaoti">证券类项目</div>

                                    <div class="top-details2">
                                        <div class="tabs">
                                            <span class="title">年度新增</span>
                                            <span class="num">{{anjian[4]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">全部累计</span>
                                            <span class="num">{{anjian[3]}}</span>
                                        </div>
                                        <!-- <div class="tabs">
                                            <span class="title">重大案件</span>
                                            <span class="num">{{yewuleixin[2].value}}</span>
                                            
                                        </div> -->
                                        
                                    </div>
                                    </div>

                                    <div class="list">
                                    <div class="biaoti">破产类项目</div>

                                    <div class="top-details2">
                                        <div class="tabs">
                                            <span class="title">年度新增</span>
                                            <span class="num">{{anjian[6]}}</span>
                                        </div>
                                        <div class="tabs">
                                            <span class="title">全部累计</span>
                                            <span class="num">{{anjian[5]}}</span>
                                        </div>
                                        <!-- <div class="tabs">
                                            <span class="title">重大案件</span>
                                            <span class="num">{{yewuleixin[2].value}}</span>
                                            
                                        </div> -->
                                        
                                    </div>
                                    </div>
                        </div>

                        <!-- <div class="biaoti2">业务类型2</div>
                        <div class="anniuzu">
                            <div class="anjiantab active">涉外案件</div>
                            <div class="anjiantab">知识产权案件</div>
                            <div class="anjiantab">并购类项目</div>

                            <div class="anjiantab">证券类项目</div>
                            <div class="anjiantab">破产类项目</div>
                            
                        </div>
                        
                        <div class="leiji">
                            <div class="list">
                                <div class="dingbu">
                                    <span>年度新增</span>
                                    <span>数量：123465</span>
                                </div>
                                <div class="content">
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>

                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                </div>
                                <div class="gengduo">
                                    <div class="anniu">查看更多</div>
                                </div>
                            </div>
                            <div class="list">
                                <div class="dingbu">
                                    <span>年度新增</span>
                                    <span>数量：123465</span>
                                </div>
                                <div class="content">
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>

                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                </div>
                                <div class="gengduo">
                                    <div class="anniu">查看更多</div>
                                </div>
                            </div>
                            <div class="list">
                                <div class="dingbu">
                                    <span>年度新增</span>
                                    <span>数量：123465</span>
                                </div>
                                <div class="content">
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>

                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                    <div>广东省xxxx公司</div>
                                </div>
                                <div class="gengduo">
                                    <div class="anniu">查看更多</div>
                                </div>
                            </div>
                        </div> -->
                        

                    </div>
                   
                
                </div>
                <!-- 右侧 -->

                

                    
        

                
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
export default {
    props: {
   
    },
    data(){
        return{
            
            zongshu:"",
            yewuleixin:'',
            anjian:''

        }  
    },
    
    methods:{
        getcaseStatistics(){
            this.$http.post('/yongxu/Statistics/caseStatistics',qs.stringify({parameter:485,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.zongshu = res.data
            })
        },
        getcaseTypeStatistics(){
            this.$http.post('/yongxu/Statistics/caseTypeStatistics',qs.stringify({parameter:485,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.yewuleixin = res.data
            })
        },
        getcaseLegaStatistics(){
            this.$http.post('/yongxu/Statistics/caseLegaStatistics',qs.stringify({data:2020})).then((res)=>{
                this.anjian = res.data.series[0].data
            })
        },
    },
    created(){
        
    },
    mounted(){
        this.getcaseStatistics()
        this.getcaseTypeStatistics()
        this.getcaseLegaStatistics()
    },
    computed:{
        
    },
    components:{
       
    }
    
}
</script>
<style lang="scss" scoped>
.tongji{
    width: 100%;
    background: #000024;
    
}
.top{
    width: 100%;
    height: calc(10vh);
    display: flex;
    flex-direction:row;
    justify-content:center;
    .logo{
        position: fixed;
        top:15px;
        left: 30px;
        width: 80px;
        height: 80px;
        img{
            width: 80px;
            height: 80px;
        }
    }
    .title{

        span{
            display: block;
            font-size: 22px;
            color:#3ED9D1;
            line-height: calc(10vh);
            letter-spacing: 15px;
            padding:0 30px;
            background: url(../assets/img/444.png) no-repeat center center;
            background-size: 100%;
            width: 450px;
            text-align: center;
        }
    }
}
.bottom{
    width: 100%;
    // height: calc(90vh);
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    box-sizing: border-box;
    .left{
        height: calc(90vh);
        width: 35%;
        padding:10px;
        box-sizing: border-box;
        .content{
            background: #29323B;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                text-align: center;
                padding-top:3vh;
                letter-spacing: 5px;
            }
            .title-tab{
                padding:0 20px;
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-direction:row;
                justify-content:space-around;
                color:#fff;
                margin-top:20px;
                font-size: 14px;
                div{
                    width: 50px;
                    text-align: center;
                }
            }
            .anli-list{
                padding:0 20px;
                .list{
                    background: #343C45;
                    display: flex;
                    flex-direction:row;
                    justify-content:space-around;
                    color:#fff;
                    padding:7px 0;
                    border-radius: 5px;
                    margin-top:10px;
                    div{
                        width: 90px;
                        text-align: center;
                    }
                }
            }
        }
    }
    // 左侧
    .middle{
        height: calc(90vh);
        flex-grow:1;
        padding:10px;
        box-sizing: border-box;
        margin-bottom:10px;
        .top-details{
            width: 100%;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .tabs{
                width: 16%;
                height: 12vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                background: #29323B;
                margin:10px 0;
                .title{
                    color:#3ED9D1;
                }
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                    display: flex;
                    flex-direction: column
                }
            }
            .tab{
                width: 49.5%;
                height: 13vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                .quanbu{
                    display: flex;
                    flex-direction: row;
                    justify-content:space-around;
                }
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                    display: flex;
                    flex-direction: column
                }

            }
            .tab:nth-child(1){
                background: #2C62E6;
            }
            .tab:nth-child(2){
                background: #0DD396;
            }
            .tab:nth-child(3){
                background: #F19149;
                p{
                    display: block;
                    width: 50%;
                    float: left;
                    color:#fff
                }
                p:nth-child(2){
                    text-align: right;
                }
            }
            .tab:nth-child(4){
                background: #FE5E80;
            }
        }
        .top-details2{
            width: 100%;
            display: flex;
            flex-direction:row;
            justify-content:flex-start;
            .tabs{
                width: 32%;
                height: 12vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                background: #29323B;
                margin:10px 0;
                margin-right: 15px;
                .title{
                    color:#3ED9D1;
                }
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                    display: flex;
                    flex-direction: column
                }
            }
            .tabs:nth-child(3){
                width: 32%;
                height: 12vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                background: #29323B;
                margin:10px 0;
                margin-right: 8px;
                .title{
                    color:#3ED9D1;
                }
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                    display: flex;
                    flex-direction: column
                }
            }
            .tab{
                width: 49.5%;
                height: 13vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                .quanbu{
                    display: flex;
                    flex-direction: row;
                    justify-content:space-around;
                }
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                    display: flex;
                    flex-direction: column
                }

            }
            .tab:nth-child(1){
                background: #2C62E6;
            }
            .tab:nth-child(2){
                background: #0DD396;
            }
            .tab:nth-child(3){
                background: #F19149;
                p{
                    display: block;
                    width: 50%;
                    float: left;
                    color:#fff
                }
                p:nth-child(2){
                    text-align: right;
                }
            }
            .tab:nth-child(4){
                background: #FE5E80;
            }
        }
        .biaoti{
            width: 100%;
            color: #fff;
            margin-top:15px;
        }
        .biaoti2{
            width: 6%;
            color: #fff;
            margin-top:15px;
            float: left;
        }
        .anniuzu{
            width: 94%;
            float: left;
            padding-top:10px;
            .anjiantab{
                float: left;
                width: 140px;
                height: 40px;
                background: #A0A0A0;
                margin-right:20px;
                text-align: center;
                color:#fff;
                line-height: 40px;
                border-radius:7px;
                cursor: pointer;
            }
            .active{
                background: #2C62E6;
            }
        }
        .quanbu{
            display: flex;
            flex-direction:row;
            justify-content: flex-start;
            margin-bottom:10px;
        }
        .kuai{
            background: #29323B;
            width: 20%;
            height: 500px;
            border-radius: 10px;
            margin-right:10px;
            margin-top:10px;
            position: relative;
            .top{
               border-bottom:1px solid #585656;
               width: 100%;
               height: 50px;
               display: flex;
                flex-direction:row;
                justify-content: space-between;
                padding: 0 10px;
                box-sizing: border-box;
                align-items:center;
               span:nth-child(1){
                   color:#3ED9D1
               }
               span:nth-child(2){
                   color:#fff
               }
            }
            .listneirong{
                display: flex;
                flex-direction:column;
                color:#fff;
                padding: 10px 10px;
                div{
                    margin-bottom:10px;
                }
            }
            
        }
        .kuai:nth-child(5){
            background: #29323B;
            width: 20%;
            height: 500px;
            border-radius: 10px;
            margin-right:0;
            margin-top:10px;
        }
    }
    // 中间
    .right{
        width: 25%;
        padding:10px;
        box-sizing: border-box;
        height: calc(90vh);
        .notice{
            height: 10vh;
            background: #29323B;
            border-radius: 5px;
            padding:5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 6vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:space-between;
                    margin-bottom:1vh;
                }
            }
        }
        // 公告
        .dynamic{
            height: 24vh;
            margin-top: 2vh;
            background: #29323B;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                margin-top:1vh;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 16vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:flex-start;
                    margin-bottom:1vh;
                    div{
                        margin-right:2vh;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    div:nth-child(1){
                        width: 20%;
                    }
                    div:nth-child(2){
                        width: 60%;
                    }
                    div:nth-child(3){
                        width: 20%;
                    }
                }
            }
        }
        // 动态
    }
}


.charts{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    .charts-content{
        width: 49%;
        height: 24vh;
        margin-top:2vh;
        
        box-sizing: border-box;
    }
    .charts-pa{
        background: #29323B;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        position: relative;
        .title{
            color:#3ED9D1;
            font-size: 18px;
            position: absolute;
            top:10px;
        }
        .echartDiv{
            margin:0 auto;
        }
    }
}

.leiji{
    width: 100%;
    background: #29323B;
    height: auto;
    margin:20px 0;
    float: left;
    border-radius: 7px;
    display: flex;
    justify-content:space-between;
    padding:20px 0;
    box-sizing: border-box;
    .list{
        width: 33.33%;
        color:#fff;
        border-right:1px solid #4d4d4d;
        padding: 0 30px 58px 30px;
        position: relative;
        .dingbu{
            width: 100%;
            display: flex;
            justify-content:space-between;
            span:nth-child(1){
                color:#3ED9D1;
                font-size: 18px;
            }
        }
        .content{
            display: flex;
            justify-content:space-between;
            flex-wrap:wrap;
            margin:10px 0;
            div{
                width: 50%;
                margin-bottom:5px;
            }
        }
    }
    .list:nth-child(3){
        border-right:0;
    }
}

.gengduo{
    width: 100%;
    position: absolute;
    bottom:0px;
    left: 0px;
    height: 40px;
    display: flex;
    justify-content:center;
    .anniu{
        color:#fff;
        background: #394148;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
    }
    .anniu:hover{
        color:#fff;
        background: #2C62E6;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
    }
}
.newbottom{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .list{
        width: 50%;
    }
}
// 29323B
</style>

